<template>
	<block>
		<view class="repayment" >
			<view class="u-flex u-row-between repayment-select">
				<view class="u-flex" @click="shows.search = true">
					<view class="u-margin-right-8">筛选</view>
					<image src="@/static/img/icon_screen_supplier@2x.png"></image>
				</view>
			</view>
			<block v-if="tableData.length>0">
				<view class="repayment-item" v-for="(item,index) in tableData" :key="index">
					<view class="u-flex u-row-between u-margin-bottom-20">
						<view class="title u-flex ">
							<image v-if="item.status!==0" src="@/static/img/icon-select_disabled@2x.png"></image>
							<image v-else-if="item.checked" src="@/static/img/icon_odd_numbers.png"
								@click="handleChecked(index)"></image>
							<image v-else src="@/static/img/icon_select.png" @click="handleChecked(index)"></image>
							<view class="u-flex-1">
								<text class="u-margin-right-5" v-for="(d,j) in k" :key="j">
									{{ item[d] }}
								</text>
							</view>
						</view>
						<view class="status"> {{ getStatusLabel(loanBillType, item.status) }}</view>
					</view>
					<view class="vin">
						<text>车架号：</text>
						<text>{{item.vin}}</text>
					</view>
					<view class="repayment-details">
						<view class="u-margin-right-24">
							<view class="table-title">贷款金额</view>
							<view class="table-content">￥{{item.principal | thousands}}</view>
						</view>
						<view>
							<view class="table-title">利息</view>
							<view class="table-content">￥{{item.interest | thousands}}</view>
						</view>
					</view>
					<u-line color="#F2F2F2" />
					<view class="repayment-button" v-if="item.status !== 0">
						<u-button shape="circle" :custom-style="{
							'padding':'2px 11px',
							'font-size':'13px',
							'height': '26px'
						}" @click="handleDetails(item)">查看明细</u-button>
					</view>
				</view>
			</block>
			<u-empty src="https://supply.zhongyimotor.com/upload/applet/maorder_kong_img@2x.png" icon-size="296"
				v-else margin-top="168" text="您目前还没有信息～"></u-empty>
			<view class="repayment_bottom">
				<view class="u-flex">
					<image v-if="getIsCheckAll ==='1'" src="@/static/img/icon_odd_numbers.png"
						@click="handleCheckedAll">
					</image>
					<image v-else-if="getIsCheckAll ==='2'" src="@/static/img/icon_select.png"
						@click="handleCheckedAll">
					</image>
					<image v-else-if="getIsCheckAll ==='3'" src="@/static/img/icon-select_disabled@2x.png"></image>
					<view class="u-font-28">全选</view>
					<view class="u-margin-left-40">
						<view>
							<text class="u-font-24">总计：</text>
							<text class="u-font-30" style="color: #F76260;">￥ {{getCheckTotal | thousands}}</text>
						</view>
						<view class="u-font-24" style="color: #A1A1A1;">已选 {{getCheckLength}} 项</view>
					</view>
				</view>
				<view>
					<u-button type="success" shape="circle" :custom-style="{
						'background':' #0FBD7F',
						'padding':'6px 22px',
						'height': '30px',
						'font-size':'13px'
					}" @click="handleSettlementOpen">去结算</u-button>
				</view>
			</view>

			<u-popup closeable v-model="shows.repayment" mode="bottom" border-radius="12">
				<view class="proof-header_title">还款</view>
				<view class="proof-body">
					<!-- 保证金 -->
					<view class="proof-title">还款信息</view>
					<view class="amount-body">
						<view style="color: #202020;">总计还款金额</view>
						<view style="color: #F76260;">￥{{getCheckTotal | thousands}}</view>
					</view>
					<!-- 上传附件 -->
					<view class="proof-title">上传附件</view>
					<scroll-view class="proof-content" scroll-y="true">
						<view class="u-margin-top-30" v-for="(item,index) in checkeds" :key="index">
							<view class="u-font-26 u-margin-bottom-14 u-flex u-row-between">
								<view class="flex-1">
									<text v-for="(d,j) in k" :key="j">{{item[d]}}</text>
								</view>
								<view class="u-margin-left-20">
									{{item.vin}}
								</view>
							</view>

							<c-upload v-model="item.payProofUrl" type="String" />
						</view>
					</scroll-view>
					<view class="u-margin-top-60">
						<u-button type="success" shape="circle" :custom-style="buttonStyle"
							@click="handleSubmit">确认上传</u-button>
					</view>
				</view>
			</u-popup>
			<u-toast ref="uToast" />
		</view>
		<u-popup @close="shows.search = false" closeable v-model="shows.search" mode="bottom" border-radius="12">
			<view class="search-title">筛选</view>
			<view class="search-form">
				<u-form :model="querys" label-position="top">
					<u-form-item  label="订单号" :border-bottom="false">
						<u-search v-model="querys.orderId" height="72" :show-action="false"
							placeholder="请输入订单号"></u-search>
					</u-form-item>
					<u-form-item  label="车架号" :border-bottom="false">
						<u-search v-model="querys.vin" height="72" :show-action="false"
							placeholder="请输入车架号"></u-search>
					</u-form-item>
					<u-form-item  label="销售申请单单号" :border-bottom="false">
						<u-search v-model="querys.innerId" height="72" :show-action="false"
							placeholder="请输入销售申请单单号"></u-search>
					</u-form-item>
					<u-form-item :border-bottom="false">
						<view class="u-flex">
							<u-button class="u-flex-1 u-margin-right-10" shape="circle"
								@click="handleReset">重置</u-button>
							<u-button type="success" :custom-style="{
							'background':'#0FBDF',
							'color':'#fff'
						}" class="u-flex-1" shape="circle" @click="handleSelect">确定</u-button>
						</view>
					</u-form-item>
				</u-form>
			</view>
		</u-popup>
	</block>
</template>

<script>
	import cUpload from '@/components/c-upload/index.vue'
	import {
		getStatusLabel,
		loanBillType
	} from '@/utils/status.js'
	import {
		addition
	} from '@/utils/compute.js'
	export default {
		components: {
			cUpload
		},
		data() {
			return {
				loanBillType,
				querys: {
					current: 1,
					size: 10
				},
				shows: {
					repayment: false,
					search: false
				},
				k: ['brand', 'series', 'model'],
				checkeds: [],
				tableData: []
			}
		},
		computed: {
			getIsCheckAll() {
				// 1-全选  2-未被权限 3-没有可以选择的
				const nonPayment = this.tableData.find(x => {
					return x.status === 0
				})
				if (!nonPayment) return '3'

				const item = this.tableData.find(x => {
					return !x.checked && x.status === 0
				})
				if (!item) return '1'
				return '2'
			},
			getCheckLength() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				return list.length
			},
			getCheckTotal() {
				const total = this.tableData.reduce((a, x) => {
					let principal = 0;
					if (x.checked) {
						principal = x.principal
					}
					return addition(a, principal)
				}, 0)
				return total || 0
			}
		},
		onLoad(options) {
			if (options.bankId) {
				this.querys.bankId = options.bankId
			}
			if (options.orderId) {
				this.querys.orderId = options.orderId
			}
		},
		onShow() {
			this.handleSelect()
		},
		onReachBottom() {
			this.querys.current += 1;
			this.getTableList()
		},
		methods: {
			handleDetails(item) {
				uni.navigateTo({
					url: '/pages/repayment/details',
					success(res) {
						res.eventChannel.emit('repaymentItem', item)
					}
				})
			},
			handleSubmit() {
				const list = []
				for (let i = 0; i < this.checkeds.length; i++) {
					const item = this.checkeds[i]
					if (!item.payProofUrl) {
						this.$toast("请检查附件是否全部上传", this);
						return
					}
					list.push({
						id: item.id,
						file: item.payProofUrl
					})
				}
				this.$api.setBatchRepayment(list).then(res => {
					this.handleSelect()
					this.shows.repayment = false
				})
				console.log(list);

			},
			handleSettlementOpen() {
				const list = this.tableData.filter(x => {
					return x.checked
				})
				if (list.length <= 0) {
					this.$toast("请选择支付项", this);
					return
				}
				this.checkeds = list
				this.shows.repayment = true
			},
			handleChecked(index) {
				const item = JSON.parse(JSON.stringify(this.tableData[index]))
				if (item.checked) {
					this.$set(this.tableData[index], 'checked', false)
				} else {
					this.$set(this.tableData[index], 'checked', true)
				}
			},
			handleCheckedAll() {
				const list = JSON.parse(JSON.stringify(this.tableData))
				this.tableData = list.map(x => {
					if (this.getIsCheckAll === '1') {
						x.checked = false
					} else if (x.status === 0 && this.getIsCheckAll === '2') {
						x.checked = true
					}
					return x
				})
			},
			getTableList() {
				const params = JSON.parse(JSON.stringify(this.querys))
				const that = this
				uni.showLoading({
					title: '加载中...'
				});
				that.$api.getLoanList(params).then(res => {
					if (params.current === 1) {
						that.tableData = res.result.records
					} else {
						that.tableData = [...that.tableData, ...res.result.records]
					}
					uni.hideLoading();
				})
			},
			handleSelect() {
				this.querys.current = 1
				this.getTableList()
				this.shows.search = false
			},
			handleReset() {
				this.querys = {
					current: 1,
					size: 10
				}
				this.getTableList()
				this.shows.search = false
			},
			getStatusLabel
		}
	}
</script>

<style scoped lang="less">
	.search-title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}
	
	.search-form {
		margin: 20px;
	
		/deep/ .u-icon-wrap {
			display: none !important;
		}
	}
	.proof-header_title {
		margin-top: 30rpx;
		font-weight: bold;
		color: #202020;
		font-size: 16px;
		text-align: center;
	}

	.proof-body {
		padding: 20px 20px 30px 20px;

		.proof-title {
			font-size: 13px;
			color: #525252;
			margin-bottom: 15px;
		}

		.proof-content {
			max-height: 300px;
		}

		.amount-body {
			padding: 11px 15px;
			background: #F7F7F7;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20px;
		}
	}

	.repayment {
		padding-bottom: 80px;

		.repayment_bottom {
			z-index: 99;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			padding: 10px 15px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #666666;

			image {
				width: 16px;
				height: 16px;
				margin-right: 14px;
			}
		}

		.repayment-select {
			font-size: 13px;
			margin: 10px 15px 0 15px;

			image {
				width: 16px;
				height: 16px;
			}
		}

		.repayment-item {
			margin: 10px 15px 0 15px;
			background: #FFFFFF;
			box-shadow: 0px 3 4px 0px rgba(217, 226, 233, 0.38);
			border-radius: 8px;
			padding: 15px 0 0 15px;

			.title {
				image {
					width: 16px;
					height: 16px;
					margin-right: 10px;

				}

				font-weight: 500;
				color: #202020;
				font-size: 14px;
			}

			.status {
				font-weight: 500;
				color: #0FBD7F;
				font-size: 14px;
				margin-right: 15px;
			}

			.vin {
				color: #8A8A8A;
				font-size: 12px;
				margin-left: 26px;
			}

			.repayment-details {
				padding: 10px 0 12px 11px;
				margin-left: 26px;
				margin-top: 12px;
				margin-bottom: 12px;
				background: #F7F7F7;
				border-radius: 8px 0px 0px 8px;
				display: flex;
				align-items: center;

				.table-title {
					color: #888A8E;
					font-size: 12px;
				}

				.table-content {
					margin-top: 6px;
					color: #202020;
					font-weight: 600;
					font-size: 12px;
				}
			}

			.repayment-button {
				padding: 10px 15px;
				display: flex;
				justify-content: flex-end;

			}
		}
	}
</style>
<style>
	page {
		background: #F7F7F7;
	}
</style>